<template>
  <div class="create">
    <h2>欢迎发布新的菜谱，先介绍一下你的大作！</h2>
    <!-- 菜品简介 --- 基本信息 -->
    <section class="create-introduce">
      <h5>标题</h5>
      <el-input
        class="create-input"
        placeholder="请输入内容"
        v-model="backData.title"
      ></el-input>

      <h5>属性</h5>
      <div>
        <el-select
          class="create-select"
          v-for="item in properties"
          :key="item.parent_type"
          :placeholder="item.parent_name"
          v-model="backData.property[item.title]"
        >
          <el-option
            v-for="option in item.list"
            :key="option.type"
            :label="option.name"
            :value="option.type"
          ></el-option>
        </el-select>
      </div>

      <h5>菜谱分类</h5>
      <div>
        <el-select placeholder="请选择菜谱分类" v-model="backData.classify">
          <el-option-group
            v-for="group in classifies"
            :key="group.parent_type"
            :label="group.parent_name"
          >
            <el-option
              :value="option.type"
              v-for="option in group.list"
              :key="option.type"
              :label="option.name"
            ></el-option>
          </el-option-group>
        </el-select>
      </div>

      <h5>成品图(328*440)</h5>
      <div class="upload-img-box flex-box">
        <div class="upload-img">
          <!-- 上传图片组件 传过去一个值 直接控制图片大小 328*440 -->
          <UploadImg
            action="/api/upload?type=product"
            :imageUrl="backData.product_pic_url"
            @res-url="(data) => (backData.product_pic_url = data.resImgUrl)"
          ></UploadImg>
        </div>
        <!-- 菜谱相关小故事 -->
        <el-input
          class="introduce-text"
          type="textarea"
          placeholder="请输入内容"
          :rows="10"
          v-model="backData.product_story"
        >
        </el-input>
      </div>
    </section>

    <h2>记录所有原材料</h2>
    <section class="create-introduce">
      <h5>主料</h5>
      <!-- [{},{},{}] -->
      <Stuff v-model="backData.raw_material.main_material"></Stuff>
      <h5>辅料</h5>
      <Stuff v-model="backData.raw_material.accessories_material"></Stuff>
    </section>

    <h2>开始写步骤了！</h2>
    <section class="create-introduce">
      <StepUpload
        v-for="(item, index) in backData.steps"
        :key="item.sId"
        :stepNum="index + 1"
        v-model="backData.steps[index]"
        @remove-step="removeStep"
      ></StepUpload>
      <el-button
        class="add-step-btn"
        type="primary"
        size="medium"
        icon="el-icon-plus"
        @click="addStep"
        >增加一步</el-button
      >
      <h5>烹饪小技巧</h5>
      <el-input
        class="introduce-text"
        type="textarea"
        placeholder="分享一下你做这道菜的过程中的心得和小技巧吧！"
        :rows="10"
        v-model="backData.skill"
      >
      </el-input>
    </section>
    <el-button
      class="submit"
      type="primary"
      size="mediun"
      icon="el-icon-plus"
      @click="send"
      >搞定，提交审核！</el-button
    >
  </div>
</template>
<script>
import UploadImg from "@/components/UploadImg";
import Stuff from "./Stuff.vue";
import StepUpload from "./Step-upload.vue";
import { getProperty, getClassify, publish } from "@/apis/menu.js";

// const mockData = {
//   title: "1",
//   property: {
//     craft: "1-1",
//     flavor: "2-1",
//     hard: "3-2",
//     people: "4-2",
//   },
//   classify: "1-1",
//   product_pic_url:
//     "http://39.102.89.187:7001/static/upload/product/chengpin11654068967808.jpg",
//   product_story: "1",
//   raw_material: {
//     main_material: [
//       {
//         name: "1",
//         specs: "1",
//       },
//       {
//         name: "1",
//         specs: "1",
//       },
//       {
//         name: "1",
//         specs: "1",
//       },
//     ],
//     accessories_material: [
//       {
//         name: "1",
//         specs: "1",
//       },
//       {
//         name: "1",
//         specs: "1",
//       },
//       {
//         name: "1",
//         specs: "1",
//       },
//     ],
//   },
//   steps: [
//     {
//       img_url: "",
//       describe: "1",
//     },
//   ],
//   skill: "1",
// };

export default {
  name: "create",
  components: {
    UploadImg,
    Stuff,
    StepUpload,
  },
  data() {
    return {
      // uploadFinishImg: "images/chengpin.jpg",
      properties: [], // 属性->页面中展示的数据
      classifies: [], // 分类->页面中展示的数据
      backData: {
        // 给后台的数据
        title: "",
        property: {
          // "craft": "1-2",
        },
        classify: "",
        product_pic_url: "images/chengpin.jpg", // 成品图
        product_story: "", // 菜谱介绍
        // 原材料
        raw_material: {
          // 主料 默认三项
          main_material: [
            { name: "", specs: "" },
            { name: "", specs: "" },
            { name: "", specs: "" },
          ],
          // 辅料 默认三项
          accessories_material: [
            { name: "", specs: "" },
            { name: "", specs: "" },
            { name: "", specs: "" },
          ],
        },
        // 步骤
        steps: [
          { img_url: "", describe: "", sId: this.stepId() },
          { img_url: "", describe: "", sId: this.stepId() },
          { img_url: "", describe: "", sId: this.stepId() },
        ],
        skill: "", // 心得小技巧
      },
    };
  },
  async mounted() {
    // 获取属性
    const { data: properties } = await getProperty();
    this.properties = properties;
    // 更改对象不是响应式的 $set()
    const obj = {};
    for (let i in properties) {
      obj[properties[i].title] = "";
    }
    this.backData.property = obj;
    // 225-229代码等同于231-234
    // for (let i in properties) {
    //   // $set(obj,属性名，属性值)
    //   this.$set(this.backData.property, [properties[i].title], "");
    // }

    // 获取分类
    const { data: classifies } = await getClassify();
    this.classifies = classifies;
  },
  methods: {
    // 生成步骤的唯一值
    stepId() {
      // Date.now() 返回的是时间戳
      return Date.now() + Math.random();
    },
    // 增加一步 步骤
    addStep() {
      this.backData.steps.push({
        img_url: "",
        describe: "",
        sId: this.stepId(),
      });
    },
    // 删除一步 步骤
    removeStep(i) {
      this.backData.steps.splice(i - 1, 1);
    },
    // 点击按钮，发布菜谱
    async send() {
      let param = this.backData;
      console.log(param);
      // 校验
      // if (
      //   !param.title ||
      //   !param.classify ||
      //   !param.skill ||
      //   !param.product_story
      // ) {
      //   this.$alert("请将信息补充完整！！！", "提示：", {
      //     type: "warning",
      //   });
      //   return;
      // }
      // 修改步骤中的数据，将sId删除
      param.steps = param.steps.map((item) => {
        return {
          img_url: item.img_url,
          describe: item.describe,
        };
      });
      // console.log(JSON.stringify(param, null, 2));
      // 用测试数据提交
      // param = mockData;
      // 发布
      const data = await publish(param);
      console.log(data);
      // 提示发布菜谱成功
      this.$message.success("发布菜谱成功！");
      // 发布成功跳转至个人空间
      this.$router.push({
        name: "user-space",
      });
    },
  },
};
</script>
<style lang="stylus" scoped>
.create {
  h2 {
    text-align: center;
    margin: 20px 0;
    // line-height: 3em;
    font-size: 20px;
  }

  .submit {
    height: 70px;
    width: 220px;
    background: #ff3232;
    color: #fff;
    border: none;
    margin: 20px auto;
    display: block;
  }
}

.create-introduce {
  background-color: #fff;
  padding: 20px;
  border-radius: 5px;

  h5 {
    line-height: 3em;
  }

  .create-input {
    width: 60%;
  }

  .create-select {
    margin-right: 20px;
  }

  .flex-box {
    display: flex;
  }

  .upload-img {
    margin-right: 20px;
  }

  .add-step-button {
    margin-left: 110px;
  }
}
</style>
